<script setup lang="ts">
  import { onShow, onUnload } from "@dcloudio/uni-app";
  import { ref } from "vue";
  import GoodsItem from "@/components/GoodsItem.vue";

  const data = ref<gt.sql.order[]>([]),
    types = ["消费单", "补货单", "配货单"],
    type = ref(0);
  let current = 0, run = true;
  async function fetch() {
    if (run || !current) {
      const rule: gt.Rp<gt.sql.order> = { "#rule": [{ field: "gid", logic: "=", value: api.me.gid }], "#page": { current: ++current, size: 10 }, "#order": [["createTime", "DESC"]] };
      // if (type.value) {
      //   rule["#rule"].push({ field: "type", logic: "=", value: types[type.value] });
      // }
      const r = await gd.order.read(rule);
      if (current > 1) {
        data.value.push(...r.data);
      } else {
        data.value = r.data;
      }
      run = data.value.length > r.total;
    }
  }
  async function confirm(p: gt.sql.order) {
    const r = await api.request({ id: p.id }, "orderConfirm");
    if (!r) {
      p.payTime = parseInt(new Date().getTime() / 1000);
    }
  }

  function init(i: number) {
    uni.setNavigationBarTitle({ title: "门店库存" });
    type.value = i > 0 && i < types.length ? i : 0;
    current = 0;
    fetch();
  }
  onShow(() => {
    uni.$on("loaded", init);
  });

  function unload() {
    uni.$off("loaded", init);
  }
  onUnload(unload);

</script>
<template>
  <view class="order y p04em whf oh">
    <view class="x za wf types">
      <view @click="init(ii)" class="type" :class="ii == type ? 'active' : ''" v-for="(i, ii) in types" :key="i">
        {{ i }}
      </view>
    </view>
    <scroll-view v-if="!!data.length" scroll-y class="fg1 wf oh mt1em" @scrolltolower="fetch">
      <view class="group y mt1em" v-for="(i, ii) in data" :key="ii">
        <view class="label x">{{ i.type }}(<template v-if="type">
            <view class="in" v-if="i.payTime > 0">已支付</view>
            <view class="out" v-else>待支付</view>
          </template><template v-else>
            <view class="in" v-if="i.payTime > 0">已收货</view>
            <view class="out" v-else>待收货</view>
          </template>)
        </view>
        <view class="out mt1em" v-for="(j, ji) in i.content" :key="ji">
          <view class="label">出库: {{ j._stock?._group.name }}</view>
          <GoodsItem :modelValue="j._stock?._goods" :sum="j.sum" row />
        </view>
        <view class="bx confirm cg" v-if="i.type != '消费单' && i.payTime == 0" @click="confirm(i)">确认收货</view>
      </view>
    </scroll-view>
    <view class="whf xcc cb" v-else>当前数据为空</view>
  </view>
</template>
<style lang="scss" scoped>
  .order {
    position: relative;
    >.types {
      >.active {
        color: $uni-color-primary;
      }
    }
    .group {
      position: relative;
      background-color: aliceblue;
      padding-top: 0.4em;
      .in {
        color: $uni-color-success;
      }
      .out {
        color: $uni-color-error;
      }
      >.confirm {
        position: absolute;
        color: $uni-color-success;
        padding: 0.2em;
        top: 0.2em;
        right: 0.4em;
      }
    }
  }
</style>